@extends('admin.defaults.head')
@section('title','标题')
@section('body')

{{--请在下面编辑body 内容--}}


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
    <input type="hidden" name="pid" id="pid">
    <div class="layui-form-item layui-hide">
        <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
    </div>
</div>







<div id="demo">
    <div class="l_tree_container" style="">
        <ew-tree :model="jsondata"></ew-tree>
    </div>

</div>


<style>
    .liselect{
        background: #bcefca;
    }
    /*.liselect .layui-btn{
        color: white;
    }*/
    .l_folder{
        cursor: pointer;
        color: blue;
    }
    .l_folder_sele{
        color: red;
        /*font-weight: bold;
        font-size: 16px;*/
    }
    td{
        padding: 0 12px;
    }
    .l_folder_sele td{
        padding: 0 6px;
        align-content: center;
    }

    .td1{
       width: 340px;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
        text-overflow:ellipsis;/*超出部分文字以...显示*/
    }
    .td2{
        width: 75px;
    }
    .td3{
        width: 75px;
    }
    .td4{
        width: 120px;
    }
    .layui-input, .layui-textarea {
        display: block;
        /*width: 100%;
        padding-left: 10px;*/
    }
    *{
        box-sizing: border-box;
        margin: 0;padding: 0;
    }
    *:before,*:after{
        box-sizing: border-box;
    }
    ul,
    li {
        list-style: none;
    }

    .l_tree_container {
        width: 100%;
        height: 100%;
        box-shadow: 0 0 3px #ccc;
        margin: 13px 13px 13px 0;
        position: relative;
        float: left;
    }
    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 108px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }
    .l_tree {
        /*width: calc(100% - 44px);*/
        height: 100%;
        padding-left: 42px;
    }
    .l_tree_branch {
        width: 100%;
        height: 100%;
        display: block;

        padding-right: 0;
        position: relative;
    }
.l_tree_click{
    padding: 5px 13px;
    border-top: #FFF 2px solid;
    height: 53px;
    line-height: 40px;
}
.layui-form-switch{
    margin-bottom: 6px;
}

    .l_tree_branch .l_tree_children_btn {
        width: 19px;
        height: 19px;
        background-color: #23b1f0;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        outline: none;
        border: 0;
        cursor: pointer;
    }

    ul.l_tree:before {
        content: '';
        border-left: 1px dashed #999999;
        height: calc(100%);
        position: absolute;
        left: 10px;
        top: 0px;
    }

    .l_tree .l_tree_branch:last-child::before {
        content: '';
        width: 3px;
        height: calc(100% - 24px);
        display: block;
        background-color: #f2f2f2;
        position: absolute;
        bottom: 0;
        left: -34px;
    }

    .l_tree,
    .l_tree_branch {
        position: relative;
    }

    .l_tree_branch::after {
        content: '';
        width: 40px;
        height: 0;
        border-bottom: 1px dashed #000;
        position: absolute;
        right: calc(100% - 9px);
        top: 22px;
    }

    .l_tree_container>.l_tree::before,
    .l_tree_container>.l_tree>.l_tree_branch::after {
        display: none;
    }
</style>







{{--上方body内容结束   请在下面编辑script 内容--}}

@endsection
@section('script')
<script src="/style_js_admin/viewjs/defaults/auth_rule.blade.js"></script>
@endsection
